<style scoped lang="scss"></style>
<template>
  <input id="color-picker" type="color" />
  <canvas id="canvas-board-container"></canvas>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import Juxing from './rect'
import { useCommonStore } from '@renderer/store/common'
const commonStore = useCommonStore()
let cvs = null
let ctx = null
let colorPicker = null
// 图形列表
const shapesList = ref([])
// 是否开启无限渲染图形数组
const isGoingToDraw = ref(false)
const draw = () => {
  // 每次绘画，清空画布
  ctx.clearRect(0, 0, cvs.width, cvs.height)
  shapesList.value.forEach((item) => {
    item.draw()
  })
  if (isGoingToDraw.value) {
    requestAnimationFrame(draw)
  }
}
const contextmenu = [
  {
    name: '删除',
    fn() {}
  }
]
const init = () => {
  cvs = document.getElementById('canvas-board-container')
  ctx = cvs.getContext('2d')
  colorPicker = document.getElementById('color-picker')
  let w = 500
  let h = 500
  cvs.width = w * devicePixelRatio
  cvs.height = h * devicePixelRatio
  cvs.style.width = w + 'px'
  cvs.style.height = h + 'px'
  cvs.style.backgroundColor = 'grey'
  // 开启鼠标事件
  drag()
}
const deleteShape = (shape) => {
  if (shape) {
    shapesList.value = shapesList.value.filter((item) => item !== shape)
  }
}
// 判断坐标是否在图形之中
const getShape = (mouseX, mouseY) => {
  for (let i = shapesList.value.length - 1; i >= 0; i--) {
    let shape = shapesList.value[i]
    if (shape.isInside(mouseX, mouseY)) {
      return shape
    }
  }
  return null
}

// 注册鼠标事件
const drag = () => {
  // 鼠标按键移动事件
  cvs.onmousedown = (e) => {
    isGoingToDraw.value = true
    let rect = cvs.getBoundingClientRect()
    let clickX = e.clientX - rect.left
    let clickY = e.clientY - rect.top
    // 当鼠标按下时，鼠标在图形之中，则进行拖动
    let shape = getShape(clickX, clickY)
    if (shape) {
      // 拖动图形
      const { startX, startY, endX, endY } = shape
      window.onmousemove = (e) => {
        // 计算当前鼠标距离第一次记录鼠标位置时的偏移量
        let deltaX = e.clientX - rect.left - clickX
        let deltaY = e.clientY - rect.top - clickY
        // 更改绘画图形的起始和结束坐标为，图形创建时开始的坐标加上此时鼠标距离之前的偏移量
        shape.startX = startX + deltaX
        shape.startY = startY + deltaY
        shape.endX = endX + deltaX
        shape.endY = endY + deltaY
      }
    } else {
      // 新建图形
      shape = new Juxing(ctx, clickX, clickY, colorPicker.value)
      shapesList.value.push(shape)
      window.onmousemove = (e) => {
        shape.endX = e.clientX - rect.left
        shape.endY = e.clientY - rect.top
      }
    }
    window.onmouseup = (e) => {
      window.onmousemove = null
      window.onmouseup = null
      isGoingToDraw.value = false
    }
  }
  // 右键删除图形
  cvs.oncontextmenu = (e) => {
    let rect = cvs.getBoundingClientRect()
    let clickX = e.clientX - rect.left
    let clickY = e.clientY - rect.top
    let shape = getShape(clickX, clickY)
    deleteShape(shape)
  }
}

onMounted(() => {
  init()
})

// 自动监听到要去开启逐帧绘画标识为true，则开始绘画
watch(
  () => isGoingToDraw.value,
  (nv) => {
    if (nv) {
      draw()
    }
  }
)
</script>
